import React, { Component } from 'react'
import { withRouter } from 'react-router-dom'
import {
  Menu, Layout,
  // Input
} from 'antd';
// const { Search } = Input;


class SiderMenu extends Component {
  constructor(props) {
    super(props)
    this.state = {

    }
  }
  render() {
    const path = this.props.location.pathname
    const { siderMenuData = {}, handleSiderMenuChange } = this.props
    return (
      <Layout>
        <Menu
          theme="dark"
          mode="inline"
          style={{ paddingTop: "25px" }}
          // defaultOpenKeys={[path]}
          defaultSelectedKeys={[path]}
          selectedKeys={[path]}
          onSelect={handleSiderMenuChange}
        >
          {/* <Menu.Item key={'search'}>
            <div>
              <Search
                placeholder="input search text"
                onSearch={value => console.log(value)}
                style={{ width: '100%', margin: 'auto' }}
              />
            </div>
          </Menu.Item> */}

          {this.menuItemrender(siderMenuData && siderMenuData.children)}
        </Menu>
      </Layout >
    )
  }
  menuItemrender = (menus) => {
    return menus && menus.map(item => {
      if (item.children) {
        return (
          <Menu.SubMenu
            key={item.path}
            title={
              <span>
                <item.icon />
                <span>{item.name}</span>
              </span>
            }
          >
            {/* 递归 */}
            {this.menuItemrender(item.children)}
          </Menu.SubMenu>
        )
      } else {
        if (item.icon) {
          return (
            <Menu.Item key={item.path}>
              <span>
                <item.icon />
                <span>{item.name}</span>
              </span>
            </Menu.Item>
          )
        } else {
          return null
        }
      }
    })
  }
}

export default withRouter(SiderMenu);
